<template>
    <div class="down">
        <el-form ref="emailForm" :model="emailForm" :rules="emailRules" class="email-form">
            <div class="title-top">
                <div class="title-style"></div>
                <h3 class="title">忘记密码</h3>
            </div>
            <!-- 手机号 -->
            <el-form-item prop="email" label-width="80px" label="邮箱:" style="width:430px">
                <div style="display:flex">
                    <!-- 下拉选择框 -->
                    <el-input style="width: 350px" v-model="emailForm.phone" type="email" auto-complete="off" placeholder="请输入您的邮箱">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                </div>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="code" label-width="80px" label="验证码:"  style="width:430px">
                <div style="display: flex;width:470px">
                    <el-input style="width: 180px" v-model="emailForm.code" type="text" auto-complete="off">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                    <button class="verification">
                        免费获取邮箱验证码
                    </button>
                </div>
            </el-form-item>
            <el-form-item prop="password" label-width="80px" label="密码:" style="width:430px">
                <div style="display:flex">
                    <!-- 下拉选择框 -->
                    <el-input style="width: 350px" v-model="emailForm.password" type="text" auto-complete="off"
                        placeholder="请输入新密码">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                </div>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop=" confirmPassword" label-width="80px" label="确认密码:" style="width:430px">
                <div style="display: flex;width:470px">
                    <el-input style="width: 350px" v-model="emailForm.confirmPassword" type="text" auto-complete="off"
                        placeholder="确认密码">
                        <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item style="width:100%;margin-top:30px;">
                <el-button :loading="loading" size="medium" type="primary"
                    @click.native.prevent="next" style="width: 410px;margin-left:20px">
                    <span v-if="!loading">下一步</span><span v-else>跳转中...</span>
                    
                </el-button>
                <!-- <div style="float: right;">
                  <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
                </div> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script>

export default {
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.emailForm.password !== value) {
                callback(new Error("两次输入的密码不一致"));
            } else {
                callback();
            }
        }
        return {
            emailForm: {
                phone: '',
                code: '',
                password: '',
                confirmPassword: '',
            },
            emailRules: {
                email: [{ required: true, trigger: "blur", message: "请输入您的邮箱" }],
                code: [{ required: true, trigger: "change", message: "请输入验证码"}],
                password: [{ required: true, trigger: "blur", message: "请输入新密码" }],
                confirmPassword: [{ required: true, trigger: "blur", message: "请再次输入密码" },
                { required: true, validator: equalToPassword, trigger: "blur" }],

            },
            loading: false,

        };

    },
    methods: {
        next(){
            this.$router.push("/retrieve/newpassword")
        }
    }

}


</script>
<style scoped lang="scss">
.down {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  height: 100%;
  .title{
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
    // border-left: 10px solid  rgb(38, 178, 243);
  }

}
.email-form{
    // border: 1px solid  rgb(38, 178, 243);
    padding: 50px;
    .el-input {
    height: 38px;
    border-radius: 15px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
    border-radius: 15px;
  }
}
.verification{
    margin-left: 30px;
}

</style>